<template>
	<view class="container">
		<view class="tabBar">
			<text>序号</text>
			<text>工单号</text>
			<text>数量</text>
			<text>产品代码</text>
		</view>
		<view class="orderList">
			<view class="order" v-for="(order, idx) in orderList" :key="idx" @click="toDetail(order)">
				<text>{{ idx + 1 }}</text>
				<text>{{ order.FBillNo }}</text>
				<text>{{ order.FAuxQty }}</text>
				<text>{{ order.FNumber }}</text>
			</view>
		</view>
		<view class="batchBlock">
			<button class="batchBt" @click="saveBatch">批量修改</button>
		</view>
		<view class="submitBlock">
			<button class="submitBt" @click="submit">提 交</button>
		</view>
		<scan-code></scan-code>
		<uni-popup ref="batchpopup" type="dialog" message="提示" :maskClick="false" style="z-index:999">
			<view style="width: 300px;height:135px;display:flex;flex-direction: column;background: #fff;position: relative;z-index:9999;border-radius: 15px;overflow: hidden;">
				<text style="width: 90%;height: 30px;margin:10px auto;display: block;line-height: 30px;">仓库</text>
				<view v-if="wareList && wareList.length>0">
					<picker @change="bindPickerChange" :value="indexW" :range="wareList" range-key="FName">
						<view class="uni-input">{{wareList[indexW].FName}}</view>
					</picker>
				</view>
				<view style="width: 100%;height: 30px;margin-top: 20px;display: block;">
					<button type="default" @click="batchclose" style="width: 50%;float: left;border:0;">取消</button>
					<button type="warn" :loading="batchLoading" @click="$debounce(batchConfirm)" style="width: 50%;border: 0;">提交</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup" type="dialog" message="提示" :maskClick="false" style="z-index:999">
			<view style="width: 300px;height:135px;display:flex;flex-direction: column;background: #fff;position: relative;z-index:9999;border-radius: 15px;overflow: hidden;">
				<text style="width: 90%;height: 30px;margin:10px auto;display: block;line-height: 30px;">提示</text>
				<input class="uni-input" v-model="FPack" focus placeholder="请输入打包号" style="padding: 0 10px;"/>
				<view style="width: 100%;height: 30px;margin-top: 20px;display: block;">
					<button type="default" @click="close" style="width: 50%;float: left;border:0;">取消</button>
					<button type="warn" :loading="loading" @click="$debounce(confirm)" style="width: 50%;border: 0;">提交</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import scanCode from "@/components/scan-code/scan-code.vue"
	import { combineRequsetData } from '../../utils/util.js'
	import { mainUrl } from '../../utils/url.js'
	import {  mapState } from 'vuex'
	export default {
		data() {
			return {
				loading: false,
				batchLoading: false,
				x: 0,
				y: 200,
				FPack: '',
				curResultCode: '',
				orderList: [],
				wareList: [{idx: 0,FName: '请选择'}],
				indexW: 0,
				wareName: '',
				wareId: ''
			}
		},
		computed: {
			...mapState(['fuserno'])  
		},
		components: {
			uniPopup,
			uniPopupDialog,
			scanCode
		},
		onShow () {
			var _this = this
			uni.$off('scancodedate') 
			uni.$on('scancodedate',(data) => {  
				_this.result = data.code
				_this.broadcastBackInfo(data.code)
			})
		},
		created() {
			this.getWare()
		},
		methods: {
			toJSON() {},
			close () {
				this.$refs.popup.close()
			},
			refresh(result) {
				// this.orderList = []
				this.refreshData(result)
			},
			//刷新数量
			refreshData(result) {
				var tmpData = "<FSQL>select * from Z_ICMO where FBillNo='" + result + "'</FSQL>"
				uni.request({
					url: mainUrl,
					method: 'POST',
					data: combineRequsetData('JA_LIST', tmpData),
					header:{
						'Content-Type':'text/xml'
					},
					success: (res) => {
						console.log(res)
						if (res.data.length == 0) {
							uni.showModal({
								content: '无该单号信息！',
								showCancel: false
							});
						} else {
							this.orderList.forEach(item => {
								if(item.FBillNo == result) {
									item.FAuxQty = res.data[0].FAuxQty
									item.FStockID = res.data[0].FStockID
								}
							})
							// this.orderList = [...this.orderList, ...res.data]
						}
					},
					fail: (err) => {
						console.log('request fail', err)
					}
				})
			},
			broadcastBackInfo (result) {
				console.log(result)
				this.curResultCode = result
				let ifHas = this.orderList.filter(this.checkRepeat)
				if (ifHas.length == 0) {
					var tmpData = "<FSQL>select * from Z_ICMO where FBillNo='" + result + "'</FSQL>"
					uni.request({
						url: mainUrl,
						method: 'POST',
						data: combineRequsetData('JA_LIST', tmpData),
						header:{
							'Content-Type':'text/xml'
						},
						success: (res) => {
							console.log(res)
							if (res.data.length == 0) {
								uni.showModal({
									content: '无该单号信息！',
									showCancel: false
								});
							} else {
								this.orderList = [...this.orderList, ...res.data]
							}
						},
						fail: (err) => {
							console.log('request fail', err)
						}
					})
				} else {
					uni.showModal({
						content: '该单号信已存在！',
						showCancel: false
					})
				}
			},
			checkRepeat (order) {
				return order.FBillNo == this.curResultCode
			},
			scan () {
				uni.scanCode({
				    onlyFromCamera: false,
				    success: (res) => {
						console.log('res.result', res.result)
						var tmpData = "<FSQL>select * from Z_ICMO where FBillNo='" + res.result + "'</FSQL>"
						uni.request({
							url: mainUrl,
							method: 'POST',
							data: combineRequsetData('JA_LIST', tmpData),
							header:{
								'Content-Type':'text/xml'
							},
							success: (res) => {
								if (res.data.length == 0) {
									uni.showModal({
										content: '无该单号信息！',
										showCancel: false
									});
								} else {
									this.orderList = [...this.orderList, ...res.data]
								}
							},
							fail: (err) => {
								console.log('request fail', err)
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			toDetail (order) {
				uni.navigateTo({
					url: './order?FBillNo=' + order.FBillNo
				})
			},
			bindPickerChange (e) {
				this.indexW = e.target.value
				this.wareId = this.wareList[e.target.value].FItemID
			},
			//批量修改
			saveBatch () {
				this.$refs.batchpopup.open()
			},
			batchclose() {
				this.$refs.batchpopup.close()
			},
			batchConfirm() {
				if(this.indexW == 0) {
					uni.showModal({
						content: '请先选择仓库!',
						showCancel: false
					})
					return false
				}
				this.batchLoading = true
				let data = this.orderList.map(item => {
					return {
						FBillNO: item.FBillNo,
						FAuxQty: item.FAuxQty,
						FStockID: this.wareId
					}
				})
				var tmpData = '<FJSON>' + JSON.stringify({items: data}) + '</FJSON>'
				uni.request({
					url: mainUrl,
					method: 'POST',
					data: combineRequsetData('save_batch', tmpData),
					header:{
						'Content-Type':'text/xml'
					},
					success: (res) => {
						if (res.data[0].code == 1) {
							uni.showToast({
								title: '批量修改成功!',
								icon: 'success',
								mask: true,
								duration: 1500
							})
							this.$refs.batchpopup.close()
							// this.orderList = []
						} else {
							uni.showModal({
								content: '批量修改失败!',
								showCancel: false
							})
						}
					},
					fail: (err) => {
						console.log('request fail', err)
					},
					complete: () => {
						this.batchLoading = false
					}
				})
				
			},
			submit () {
				this.$refs.popup.open()
			},
			confirm () {
				if (this.orderList.length == 0) {
					uni.showModal({
						content: '请先扫码录入订单!',
						showCancel: false
					})
					return false
				}
				if (!this.FPack) {
					uni.showModal({
						content: '请输入打包号!',
						showCancel: false
					})
					return false
				}
				let data = this.orderList.map(item => {
					return {
						FBillNO: item.FBillNo,
						FAuxQty: item.FAuxQty,
						FStockID: this.wareId ? this.wareId : item.FStockID,
						FPack: this.FPack
					}
				})
				console.log(data)
				this.loading = true
				var tmpData = '<FJSON>' + JSON.stringify({items: data}) + '</FJSON>'
					tmpData += '<fuserno>' + this.fuserno + '</fuserno>'
					console.log(tmpData)
				uni.request({
					url: mainUrl,
					method: 'POST',
					data: combineRequsetData('ICMO', tmpData),
					header:{
						'Content-Type':'text/xml'
					},
					success: (res) => {
						if (res.data[0].code == 1) {
							uni.showToast({
								title: '提交成功!',
								icon: 'success',
								mask: true,
								duration: 1500
							})
							this.$refs.popup.close()
							this.orderList = []
						} else {
							uni.showModal({
								content: '提交失败!',
								showCancel: false
							})
						}
					},
					fail: (err) => {
						console.log('request fail', err)
					},
					complete: () => {
						this.loading = false
					}
				})
			},
			onChange (e) {
				// this.old.x = e.detail.x
				// this.old.y = e.detail.y
			},
			getWare () {
				var tmpData = '<FSQL>select FItemID,FName from t_stock where FDeleted=0</FSQL>'
				uni.request({
					url: mainUrl,
					method: 'POST',
					data: combineRequsetData('JA_LIST', tmpData),
					header:{
						'Content-Type':'text/xml'
					},
					success: (res) => {
						console.log('wareList', res.data)
						let newArray = res.data.map((item, idx) => {
							item.idx = idx+1
							return item
						})
						this.wareList = [...this.wareList , ...newArray]
						console.log(this.wareList)
					},
					fail: (err) => {
						console.log('request fail', err);
					}
				})
			},
		}
	}
</script>

<style>
	.container {
	}
	.tabBar{
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: #1196DB;
		color: #ffffff;
		position: fixed;
		z-index: 999;
	}
	text{
		padding: 0 5px;
		text-align: center;
	}
	.tabBar text:nth-of-type(1) {
		width: 40px;
	}
	.tabBar text:nth-of-type(2) {
		width: 85px;
	}
	.tabBar text:nth-of-type(3) {
		width: 85px;
	}
	.tabBar text:nth-of-type(4) {
		width: calc(100% - 210px - 40px);
	}
	.orderList{
		width: 100%;
		position: relative;
		top: 45px;
		z-index: 99;
		display: flex;
		flex-direction: column;
		margin-bottom: 70px;
		float: left;
	}
	.order{
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 1px solid #eeeeee;
	}
	.order text:nth-of-type(1) {
		width: 40px;
	}
	.order text:nth-of-type(2) {
		width: 85px;
	}
	.order text:nth-of-type(3) {
		width: 85px;
	}
	.order text:nth-of-type(4) {
		width: calc(100% - 210px - 40px);
	}
	.dotScan {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: #1196DB;
		font-size: 14px;
		color: #ffffff;
		text-align: center;
		line-height: 50px;
		z-index: 999;
	}
	.batchBlock {
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 55px;
		z-index: 99;
	}
	.batchBt {
		color: #ffffff;
		background: #FF0000;
		border: 0;
		border-radius: 0;
	}
	.submitBlock{
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}
	.submitBt{
		color: #ffffff;
		background: #FF0000;
		border: 0;
		border-radius: 0;
	}
</style>
